<template>
  <div>
    <!-- 准备一个表单,收集用户输入的数据 -->
    <el-form style="width: 700px" ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="电影院名称" prop="cinema_name">
        <el-input v-model="form.cinema_name" placeholder="请输入电影院名称"></el-input>
      </el-form-item>
      <el-form-item label="点地图快速填表｜选择位置" prop="">
        <div id="container" style="height:200px;border:1px solid #666"></div>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="form.province" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="form.city" placeholder="请输入城市名称"></el-input>
      </el-form-item>
      <el-form-item label="地区" prop="district">
        <el-input v-model="form.district" placeholder="请输入地区"></el-input>
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <el-input v-model="form.longitude" placeholder="请输入经度"></el-input>
      </el-form-item>
      <el-form-item label="纬度" prop="latitude">
        <el-input v-model="form.latitude" placeholder="请输入维度"></el-input>
      </el-form-item>
      <el-form-item label="选择标签" prop="tags">
        <el-select multiple v-model="form.tags" placeholder="请选择" style="width:100px">
          <el-option v-for="item in tags" :key="item.id" :label="item.tagname" :value="item.tagname"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="">
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="$refs.form.resetFields()">重置</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import httpApi from '@/http';
import AMapLoader from '@amap/amap-jsapi-loader';

  export default {
    data() {
      return {
        tags: [],
        form:{
          cinema_name: '',
          address: '',
          province: '',
          city: '',
          district: '',
          longitude: '',
          latitude: '',
          tags: ''
        },
        rules:{
          cinema_name:{required:true,message:'必填',trigger:'blur'},
          address: {required:true,message:'必填',trigger:'blur'},
          province: {required:true,message:'必填',trigger:'blur'},
          city: {required:true,message:'必填',trigger:'blur'},
          district: {required:true,message:'必填',trigger:'blur'},
          longitude: {required:true,message:'必填',trigger:'blur'},
          latitude: {required:true,message:'必填',trigger:'blur'},
          tags: {required:true,message:'必填',trigger:'blur'}
        }
      }
    },
    methods: {
      // 提交表单
      submit() {
        this.form.tags = this.form.tags.join(',')
        console.log(this.form);
        this.$refs.form.validate(valid=>{
          if(valid){
            httpApi.cinemaApi.add(this.form).then(res=>{
              if(res.data.code === 200){
                console.log('添加成功',res);
                this.$message.success('影院添加成功')
                this.$router.push('/home/cinema-list')
              }
            })
          }else{
            this.$message.info('请检查填写信息')
          }
        })
      },

      // 初始化地图
      initMap(){
        AMapLoader.load({
          key:"ddcfbbbb2ba4c9eba7a4b5c947e7c723",  // 申请好的Web端开发者Key，首次调用 load 时必填
          version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins:['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
          this.AMap = AMap
          // console.log(this.AMap)
          this.map = new AMap.Map("container",{  //设置地图容器id
            viewMode:"3D",    //是否为3D地图模式
            zoom:11,           //初始化地图级别
            center:[116.502725, 39.916636], //初始化地图中心点位置
          });
          // 为地图对象绑定点击事件
          this.map.on('click',(ev)=>{
            console.log(ev.lnglat); // 点击地图获取信息
            let lng = ev.lnglat.KL  // 经度
            let lat = ev.lnglat.kT  // 纬度
            // 通过经纬度 访问高德地图开放服务，逆地理编码
            let geocoder = new AMap.Geocoder()
            geocoder.getAddress([lng,lat],(status,result)=>{
              console.log(status,result);  // 通过转化查看信息
  
              // 回填表单
              let {formattedAddress, addressComponent:{province,city,district}} = result.regeocode
              this.form.address = formattedAddress
              this.form.province = province
              this.form.city = city
              this.form.district = district
              this.form.longitude = lng
              this.form.latitude = lat
            })
          })
        }).catch(e=>{
          console.log(e);
        })
      },
    },
    mounted () {
      this.initMap();  // 初始化地图

      // 加载所有影院标签
      httpApi.cinemaApi.queryTages().then(res=>{
        console.log('加载所有影院标签',res);
        this.tags = res.data.data
      }).catch(err=>{
        console.log(err);
      }).finally(_=>{
        this.$message.info('胡汉三又回来啦')
      })
    },
  }
</script>

<style lang="scss" scoped>

</style>